<template>
  <div class="home-container">
    <!-- 悬浮导航 -->
    <nav-ball v-model="isShow">
      <nav-ball-item title="购物车" @click.native="$router.push('/shop')"></nav-ball-item>
      <nav-ball-item title="申请开店" @click.native="$router.push('/applyOpenStore')"></nav-ball-item>
      <nav-ball-item title="推广赚钱" @click.native="$router.push('/promotion')"></nav-ball-item>
      <nav-ball-item title="我的推广" @click.native="$router.push('/myPromotion')"></nav-ball-item>
      <nav-ball-item title="帮助中心" @click.native="$router.push('/help')"></nav-ball-item>
    </nav-ball>
    <!-- 搜索框 -->
    <div class="search-btn">
      <van-button type="info" round to="/search"></van-button>
    </div>
    <!-- / 搜索框 -->

    <!-- 搜索栏下面的图片 -->
    <div class="photo" ref="swipeRef">
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
        <van-swipe-item>
          <van-image
            width="9rem"
            height="6rem"
            fit="contain"
            src="https://w.wallhaven.cc/full/zm/wallhaven-zmr3lo.jpg"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
            width="9rem"
            height="6rem"
            fit="contain"
            src="https://w.wallhaven.cc/full/g8/wallhaven-g83kzq.jpg"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
            width="9rem"
            height="6rem"
            fit="contain"
            src="https://w.wallhaven.cc/full/4l/wallhaven-4l2z22.jpg"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- / 搜索栏下面的图片 -->

    <!-- 圆巴巴 -->
    <div class="yuanxing" ref="ulWrapRef">
      <ul class="yuan-top">
        <li>
          <span>
            <img
              src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3740609177,2855998138&fm=26&gp=0.jpg"
              alt
            />
          </span>
          <i style="left:5px">蔬菜区</i>
        </li>
        <li>
          <span>
            <img
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603031816467&di=34a614fc9bcc77181d6b2a0bde73c9f9&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2925267655%2C683723028%26fm%3D214%26gp%3D0.jpg"
              alt
            />
          </span>
          <i style="left:5px">水果区</i>
        </li>
        <li>
          <span>
            <img
              src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1927992869,4072208963&fm=15&gp=0.jpg"
              alt
            />
          </span>
          <i>奶制品</i>
        </li>
        <li>
          <span>
            <img
              src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1005561373,3736771030&fm=26&gp=0.jpg"
              alt
            />
          </span>
          <i>休闲食品</i>
        </li>
        <li>
          <span>
            <img
              src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3793427173,3875659108&fm=26&gp=0.jpg"
              alt
            />
          </span>
          <i>冷冻食品</i>
        </li>
      </ul>
      <ul class="yuan-bottom">
        <li>
          <span>
            <img
              src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3498445136,3602031229&fm=26&gp=0.jpg"
              alt
            />
          </span>
          <i>罐头食品</i>
        </li>
        <li>
          <span>
            <img
              src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3461330104,1196176423&fm=26&gp=0.jpg"
              alt
            />
          </span>
          <i>海鲜区</i>
        </li>
        <li>
          <span>
            <img
              src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=285901181,4044392254&fm=26&gp=0.jpg"
              alt
            />
          </span>
          <i>餐食烘焙</i>
        </li>
        <li>
          <span>
            <img
              src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2653543216,3964923843&fm=26&gp=0.jpg"
              alt
            />
          </span>
          <i>蛋类区</i>
        </li>
        <li>
          <span>
            <img
              src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=303989797,1932787063&fm=26&gp=0.jpg"
              alt
            />
          </span>
          <i>膨化食品</i>
        </li>
      </ul>
    </div>
    <!--/ 圆巴巴 -->

    <!-- 商品列表 -->
    <goods-list speciesId="s1" class="home-goodslist" />
    <!-- / 商品列表 -->
  </div>
</template>

<script>
import GoodsList from '../goods/components/goods-list'
import { navBallItem, navBall } from '@/utils/navBall'
export default {
  components: {
    GoodsList,
    navBallItem,
    navBall
  },
  props: {

  },
  data () {
    return {
      value: '',
      isShow: false
    }
  },
  watch: {

  },
  computed: {

  },
  created () {
    this.giveClickEvent()
  },
  mounted () {

  },
  methods: {
    giveClickEvent () {
      setTimeout(_ => {
        this.$refs.swipeRef.addEventListener('click', _ => {
          // console.dir(_.target.localName)
          this.$router.push('/goods')
        })
        this.$refs.ulWrapRef.addEventListener('click', _ => {
          // console.dir(_.target.localName)
          if (_.target.localName === 'img') { this.$router.push('/goods') }
        })
      }, 0)
    }
  }
}
</script>

<style scoped lang="less">
.search-btn {
  position: fixed;
  top: 0;
  width: 100%;
  height: 108px;
  padding: 20px 30px 0;
  background-color: red;
  box-sizing: border-box;
  z-index: 1;
  .van-button {
    width: 100%;
    height: 68px;
    background-color: #f7f8fa;
    border: none;
  }
}
.photo {
  margin-top: 100px;
  border-radius: 20px;
  .van-image {
    padding: 0 10px 0 38px;
  }
}
.yuanxing {
  .yuan-top,
  .yuan-bottom {
    display: flex;
    // align-items: center;
    // justify-content: center;
    //flex-wrap: nowrap;
    margin-top: 15px;
    li {
      display: flex;
      flex-direction: column;
      text-align: center;
      flex: 1;
      img {
        border-radius: 50%;
        width: 80px;
        height: 80px;
      }
      i {
        font-style: normal;
        font-size: 22px;
      }
    }
  }
}
.goods-list {
  margin-top: 50px;
  margin: 0 8px;
}
</style>
